<template>
	<view class="login">
		<view>
			<u-row justify="space-between" customStyle="margin-bottom: 10px">
				<u-col span="3" style="height: 30px; line-height: 30px;">
					<view class="demo-layout bg-purple-light">
						<image src="@/static/public/left_arrow.png" style="width: 10px;height: 15px;" @click="goBack()"></image>
					</view>
				</u-col>
				<u-col span="2" style="height: 30px;">
					<view class=" bg-purple">
						<span style="color: #9b9bab; font-size: 11px;">
							遇到问题
						</span>
					</view>
				</u-col>
			</u-row>
		</view>

		<view class="huanying">
			欢迎登陆
		</view>

		<view>
			<u-row justify="space-between" class="space-between">
				<u-col span="1.5">
					<view class="demo-layout1 bg-purple" style="color: #80808b;">&nbsp; +86</view>
				</u-col>
				<u-col span="0.5" style="height: 14vw;">
					<view class="demo-layout1 bg-purple-light">
						<view style="font-size: 25px;margin: 9px 0 0 0;color: #9b9bab;">|</view>
					</view>
				</u-col>
				<u-col span="10">
					<view class="demo-layout bg-purple">
						<input v-model="aUser.phone" type="tel" placeholder="请输入手机号">
					</view>
				</u-col>
			</u-row>
			<!-- 密码 -->
			<u-row justify="space-between" class="space-between" v-show="isPassword">
				<u-col span="8">
					<view class="demo-layout bg-purple" style="margin: 0 0 0 10px;">
						<input v-model="aUser.code" type="text" placeholder="请输入验证码">
					</view>
				</u-col>
				<u-col span="0.5" style="height: 14vw;">
					<view class="demo-layout1 bg-purple-light">
						<view style="font-size: 25px;margin: 9px 0 0 0;color: #9b9bab;">|</view>
					</view>
				</u-col>
				<u-col span="3.5">
					<view class="demo-layout1 bg-purple" style="font-size: 14px;color: #80808b;" @click="getCaptCha"
						:class="{ disabled: isCounting }">
						<template v-if="isCounting">{{ countdown }}秒后重新获取</template>
						<template v-else>获取验证码</template>
					</view>
				</u-col>
			</u-row>

			<!--验证码-->
			<u-row justify="space-between" class="space-between" v-show="!isPassword">
				<u-col span="8">
					<view class="demo-layout bg-purple" style="margin: 0 0 0 10px;">
						<input v-model="aUser.password" :password="isShow" type="text" placeholder="请输入密码">
					</view>
				</u-col>
				<u-col span="3.5">
					<view class="demo-layout1 bg-purple" style="font-size: 14px;color: #80808b;"
						@click="isShow=!isShow">
						<image v-show="isShow" src="@/static/mine/login/closed_eye.png"></image>
						<image v-show="!isShow" style="height: 1.5vh;" src="@/static/mine/login/expand_eye.png">
						</image>
					</view>
				</u-col>
			</u-row>
			<view style="font-size: 12px;color: #56565d;">
				未注册的手机号在验证通过后将自动注册
			</view>
		</view>

		<view class="xieyi">
			<view>
				<u-checkbox-group placement="column">
					<u-checkbox></u-checkbox>
				</u-checkbox-group>
			</view>
			<view style="font-size: 12px;color: #9595a2;">
				我已阅读并同意
			</view>
			<view>
				<a href="">《用户协议》</a>
				<a href="">《隐私协议》</a>
			</view>
		</view>

		<view class="btn">
			<button @click="login">登录</button>
		</view>

		<view>
			<u-row justify="space-between" customStyle="margin-bottom: 10px"
				style="height: 30px; line-height: 30px;font-size: 12px;">
				<u-col span="3">
					<view @click="togglePassword()" v-show="isPassword">
						密码登录
					</view>
					<view @click="togglePassword()" v-show="!isPassword">
						验证码登录
					</view>
				</u-col>
				<u-col span="3">
					<view>
						手机号不可用
					</view>
				</u-col>
			</u-row>
		</view>

		<view class="tubiao">
			<image src="@/static/public/wechat.png"></image>
			<image src="@/static/public/qq.png"></image>
		</view>
		<u-modal :show="show" :title="title" :content="content" @confirm="handleConfirm"></u-modal>
	</view>
</template>

<script>
	import {
		rear
	} from '@/config/api.js';
	export default {
		data() {
			return {
				aUser: {
					phone: "",
					password: "",
					code: "",
				},
				isPassword: false,
				isShow: true,
				countdown: 60, // 倒计时时间
				isCounting: false, // 是否正在倒计时
				show: false,
				title: '',
				content: '',
			}
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			login() {
				uni.removeStorageSync('user');
				uni.request({
					url: rear + "/user/doLogin", // API 地址,
					method: 'POST',
					data: {
						"name": this.aUser.phone,
						"password": this.aUser.password,
						"code": this.aUser.code
					},
					success: (res) => {
						if (res.data.data === '账号或密码错误') {
							this.show = true;
							this.title = '提示';
							this.content = res.data.data;
						} else {
							uni.setStorageSync('user', res.data.data);
							uni.showToast({
								title: '登录成功！',
								duration: 2000,
							})
							uni.navigateBack({
								delta: 1
							});
							// uni.switchTab({
							// 	url: "../mine/index",
							// });
							// 把用户名存储到本地存储中
						}
					}
				})
			},
			togglePassword() {
				this.isPassword = !this.isPassword;
				this.aUser.code = "";
				this.aUser.password = "";
			},
			handleConfirm() {
				this.show = false;
			},
			getCaptCha() {
				if (this.isCounting) return; // 如果已经在倒计时中，直接返回

				uni.request({
					url: rear + "/user/captCha", // API 地址,
					method: 'POST',
					data: {
						user: this.aUser.phone,
					},
					success: (res) => {
						this.isCounting = true; // 开始倒计时
						const timer = setInterval(() => {
							this.countdown--;
							if (this.countdown <= 0) {
								clearInterval(timer);
								this.countdown = 60;
								this.isCounting = false;
							}
						}, 1000);
					},
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	.login {
		padding: 100rpx 40rpx 0 40rpx;
		box-sizing: border-box;

		height: 100vh;
		position: relative;
		background-image: url("@/static/public/background.png");
		background-repeat: no-repeat;
		background-size: cover;

		.huanying {
			// border: 1px red solid;
			font-size: 18px;
			margin: 10vw 0 5vw 0;
		}

		.bg-purple {
			image {
				width: 2.2vh;
				height: 1vh;
				position: relative;
				left: 20%;
			}
		}

		.u-demo-block__content {
			width: 90%;
			margin: 3vh auto;
			border-radius: 1vh;
			box-shadow: 0.1vh 0.1vh 0.5vh rgba(0, 0, 0, 0.1);
			position: relative;

			image {
				position: absolute;
				left: 83%;
				width: 5vw;
				height: 2.5vw;
				padding: 5vw;
				top: 9%;
			}
		}

		.space-between {
			height: 6vh;
			border-radius: 10px;
			margin: 3vh 0;
			background-color: white;
			box-shadow: 0 0 10px rgba(126, 126, 126, 0.2);

			.demo-layout1 {
				height: 30px;
				width: 100%;
				text-align: center;
				line-height: 30px;
			}
		}


		.btn {
			margin: 30rpx 0 10rpx 0;
			border: none;

			button {
				background: linear-gradient(#fe996e, #fe703e);
				color: white;
				border-radius: 2vw;
				height: 5vh;
				line-height: 5vh;
			}

			.tip {
				text-align: right;
				color: gray;
				margin-top: 20rpx;

			}
		}

		.xieyi {
			width: 100%;
			margin: 1vw 0;
			font-size: 15px;
			display: flex;
			align-items: center;
			flex-direction: row;

			a:link {
				text-decoration: none;
				/* 去除下划线 */
				color: #000;
				/* 设置颜色为黑色 */
			}

			a {
				color: #fe7f50;
				font-size: 12px;
			}
		}

		.tubiao {
			width: 29.5%;
			margin: 0 auto;
			position: absolute;
			bottom: 2vh;
			left: 35.5%;

			image {
				width: 30px;
				height: 30px;
				margin: 0 10px;

			}
		}
	}
</style>